<template>
	<div class="wrapper">
	<router-link :to='"/retiu"+item.id'
		 class="icon"
			 v-for="item of iconlist"
				  :key="item.id"
				 tag="div"
				  >
			<div class="icon-img"
				 v-bind:class="[item.color]" 
				 >
				<img :src="item.imgUrl"/> </div>
			<div class="icon-desc">{{item.desc}}</div>
		
		</router-link>
	</div>
</template> 

<script>
	//	定义输出组件name
export default {
 name: 'homeCatalog',
 props:{
	 iconlist:Array
 },
  data(){
    	return{
    		a:"a",
    		b:"b",
    		c:"c",
    		d:"d",
  	     
  	        methods:{ 
				change:function(){
					return
					 console.log("1")
				}
		    }
		}
    	
    },
	methods:{
		chenge(index){
            this.$store.state.a=index
		
		},
	},
	mounted() {
	},
}   
</script>

  <!--给css样式设置语言工具stylus-->
  <style scoped="scoped">
  .wrapper{
  	background-color: rgb(248, 246, 246);
	
  }
  .icon{
  	width: 22%;
  	display: inline-block;
	  margin-top: 1px;
  	
  }
  .icon-img{
  	width:60%;
  	border-radius: 50px;
  	margin:10px 10px 10px 20px;
  }
  .icon-img img{
  	width:80%;	
  	border-radius: 50px;
  	cursor: pointer;
  	
  }
  .icon-desc{
  	text-align: center;
	  margin-bottom:5px ;
  }
  .a{
  	background-color:hotpink;
  }
  .b{
  	background-color:#25A4BB;
  }
  .c{
  	background-color: blue;
  }
  .d{
  	background-color:red;
  }
</style>

